<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>亿信聊天室 个人中心</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/menber.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<header>
    <div class="top">
        <div class="container">
            <!--未登录状态-->
            <div class="login" style="display: none">
                <div class="top-reg">
                    <div class="denglu fl">
                        <a href="javascript:;"><span><img src="../images/icon_wdzh.png" alt="">登陆</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="zhuce fl">
                        <a href="javascript:;"><span><img src="../images/icon_yhgl.png" alt="">注册</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span>游客，您好！</span>
                    您是第666位访问网站的人
                </div>
            </div>
            <!-- 登陆状态 -->
            <div class="login success">
                <div class="top-reg">
                    <div class="qiandao fl">
                        <a href="javascript:;"><span><img src="../images/icon_rl.png" alt="">签到</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="message.html"><span><img src="../images/icon_tz.png" alt="">通知</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="menber.html"><span><img src="../images/icon_grzx.png" alt="">个人中心</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="javascript:;" class='loginout'><span><img src="../images/icon_aqtc.png" alt="">安全退出</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span class="top_username">xxx</span>，您好！
                    当前在线人数666人
                </div>
            </div>
        </div>
    </div>
</header>
<!--logo-->
<div class="logo">
    <div class="container">
        <div class="logoimg fl">
            <a href="../index.html"><img src="../images/icon_logo.png" alt=""></a>
        </div>
        <div class="logoright fr">
            <li class="on"><a href="../index.html">首页</a></li>
            <li><a href="javascript:;" class="addroom">创建房间</a></li>
            <li><a href="javascript:;"><img src="../images/icon_nav.png" alt=""></a></li>
            <div class="search-box fl">
                <input type="text" class="search" placeholder="请输入房间ID">
                <img src="../images/icon_search.png" alt="">
                <div class="result_box">

                </div>
            </div>
        </div>
    </div>
</div>
<!--个人中心-->
<div class="container menber">
    <div class="menber-left fl">
        <div class="menber-left-top">
            <div class="user-logo">
                <img src="../images/icon_mrtx.png" alt="" class="user-left-head" width="56" height="56">
                <p class="cen_username">用户名</p>
                <p class="user_id">ID:445566</p>
            </div>
            <div class="menber-left-cen">
                <li>
                    <p class="user_hot">1000</p>
                    <p>活跃度</p>
                </li>
                <li>
                    <p class="user_money">100</p>
                    <p>亿信币</p>
                </li>
                <div class="clearfix"></div>
            </div>
            <div class="menber-left-link">
                <li class="on"><a href="menber.html"><img src="../images/icon_wdzl.png" alt="">我的资料</a></li>
                <li><a href="wdgz.html"><img src="../images/icon_wdgz.png" alt="">我的关注</a></li>
                <li><a href="fans.html"><img src="../images/icon_wdfs.png" alt="">我的粉丝</a></li>
                <li><a href="wdzh.html"><img src="../images/icon_wdzh.png" alt="">我的账户</a></li>
                <li><a href="message.html"><img src="../images/icon_wdmsg.png" alt="">我的消息</a></li>
            </div>
        </div>
    </div>
    <div class="menber-right fl">
        <!-- 我的资料 -->
        <div class="user-info wdzl">
            <div class="user-title">
                <p>设置账户信息</p>
            </div>
            <div class="clearfix"></div>
            <div class="user-info-con wdzl-con">
                <div class="wdzl-from">
                    <from>
                        <div class="group">
                            <div class="group-tit">手机：</div>
                            <input type="text" name="tel" readonly="readonly" placeholder="137****2247" class="user_tel_number">

                        </div>
                        <div class="group">
                            <div class="group-tit">昵称：</div>
                            <input type="text" name="tel" readonly="readonly" placeholder="用户名" class="user_username">
                            <a href="javascript:;" class="edit">修改</a>
                        </div>
                        <div class="group">
                            <div class="group-tit">性别：</div>
                            <a href="javascript:;" class="radiosex on" data-sex="1"><input type="radio" name="sex" value="1" class="boy sex"></a>
                            <a href="javascript:;" class="radiosex" data-sex="0"><input type="radio" name="sex" value="0" class="girl sex"></a>
                        </div>
                        <div data-toggle="distpicker" class="distpicker" id="distpicker3">
                            <div class="group">
                                <div class="group-tit">省份：</div>
                                <select id="eprovinceName" data-province="" name="provinceName"></select>
                            </div>
                            <div class="group">
                                <div class="group-tit">城市：</div>
                                <select id="ecityName" data-city="" name="cityName"></select>
                            </div>
                            <div class="group">
                                <div class="group-tit">地区：</div>
                                <select id="edistrictName" data-district="" name="districtName"></select>
                            </div>
                        </div>
                        <div class="group qm" style="border-bottom: none;">
                            <div class="group-tit">签名：</div>
                            <textarea name="" id="" class="qianming" style="width: 490px;height: 117px;outline: none;resize: none;text-align: left;line-height: 1.5;text-indent: 2em;background: #efefef;color: #a3a3a3">今天的天气好好啊，又刮风又下雪的！</textarea>
                        </div>
                    </from>
                </div>
                <div class="userpicbox">
                    <img src="../images/icon_mrtx1.png" alt="" class="user-head">
                    <input type="file" class="shangchuan" id="shangchuan" accept="image/png, image/jpeg, image/gif, image/jpg">
                    <a href="javascript:;" class="user-pic-upload">点击修改头像</a>
                    <div class="yulan">
                        <img src="../images/icon_closed.png" alt="" width="10" height="10" class="yulan_close">
                        <img src="http://pbqt8ydnc.bkt.clouddn.com/a0857201808021911599615.png" alt="" class="user-head-yulan">
                        <a href="javascript:;" class="user-pic-upload" id="user-head-save">保存头像</a>
                    </div>
                </div>
                <div class="edit-ok">
                    <a href="javascript:;" class="edit-ok-btn">保存修改</a>
                </div>
            </div>
        </div>
        <div class="user-info wdzl"></div>
        <div class="user-info wdzl"></div>
        <div class="user-info wdzl"></div>
        <div class="user-info wdzl"></div>
    </div>
    <div class="clearfix"></div>
</div>
<!--个人中心end-->
<!--footer-->
<footer>
    <div class="container">
        <div class="footer-list">
            <div class="footer-tit">
                联系我们
            </div>
            <ul>
                <li><a href="tencent://message/?uin=88888888&Site=&menu=yes">商务QQ:11111111</a></li>
                <li>技术咨询:11111111</li>
                <li>联系电话:11111111</li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                常见问题
            </div>
            <ul>
                <li><a href="javascript:;">账号问题</a></li>
                <li><a href="javascript:;">常见问题</a></li>
                <li><a href="javascript:;">新手入门</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                关于我们
            </div>
            <ul>
                <li><a href="javascript:;">公司介绍</a></li>
                <li><a href="javascript:;">隐私政策</a></li>
                <li><a href="javascript:;">免责声明</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                友情链接
            </div>
            <ul>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <img src="../images/icon_logo1.png" alt="">
        </div>
        <div class="clearfix"></div>
    </div>
</footer>
<div class="copyright">
    <div class="container">
        <div class="fr">川ICP备案号xxxxx号</div>
        <div class="cpr">Copyright ©聊天室网 2014-2018.All rights reseved</div>
    </div>
</div>

<script>
    $(window).ready(function(){
        //修改个人信息
        $('.edit-ok-btn').click(function(){
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            var editusertel ;
            var username = $('.user_username').val();
            var user_province = $('#eprovinceName').val();
            var uset_city = $('#ecityName').val();
            var user_district = $('#edistrictName').val();
            var usersex = $('a.radiosex.on').data('sex');
            var user_address = "";
            var user_id = $.cookie('user_id');
            var user_token =$.cookie('user_token')
            var user_sign = $('.qianming').val();
            var newreg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
            if(myreg.test($('.user_tel_number').val())){
                $('.user_tel_number').parents('.group').removeClass('redbottom');
                 editusertel = $('.user_tel_number').val();
            }else{
                $('.user_tel_number').parents('.group').addClass('redbottom');
               return false;
            }

            if (username.length>10||!newreg.test(username)){
                $('.wdzl-from .group').eq(1).append('<div class="tips zh">昵称限制10字符以内,无法使用特殊符号</div>');
                $('.user_username').addClass('redbottom');
                return false;
            }else{
                $('.tips').hide();
                $('.user_username').removeClass('redbottom');
            }
            if (user_sign.length>20){
                $('.wdzl-from .group.qm').append( '<span class="tips">签名限制20字以内</span>' );
                return false;
            } else{
                $('.tips').hide();
            }
            $.ajax({
                type:"POST",
                url:'http://shishi2017.com/api/personal/edit_personal',
                data:{
                    uid:user_id,
                    token:user_token,
                    nickname:username,
                    sex:usersex,
                    city:uset_city,
                    province:user_province,
                    district:user_district,
                    address:user_address,
                    sign:user_sign
                },
                success:(function(edit){
                    alert(JSON.parse(edit).msg);
                    window.location.reload();
                }),
                error:(function(edit_err){
                    alert(JSON.parse(edit_err.msg));
                })
            });
        });

        //头像预览动画
        $('.yulan .yulan_close').click(function(){
                $('.yulan').animate({top:'0px',opacity:'0',},1000);
        });
        //上传头像
        (function(){
            var fromdata='';
            $('#shangchuan').on('change',function(e){
                var file = e.target.files || e.dataTransfer.files;
                if(file){
                    var reader = new FileReader();
                    reader.onload = function () {
                        $(".yulan img.user-head-yulan").attr("src", this.result);
                    };
                    var fromdata = new FormData();
                    fromdata.append('file',$('#shangchuan')[0].files[0]);
                    fromdata.append('uid',$.cookie('user_id'));
                    fromdata.append('token',$.cookie('user_token'));
                    reader.readAsDataURL(file[0]);
                };
                cl(fromdata);
            });
            function cl(sfs){
                $.ajax({
                    url:'http://shishi2017.com/api/personal/upload_head',
                    type:'POST',
                    data:sfs,
                    dataType:'JSON',
                    contentType:false,
                    processData:false,
                    success:(function(head_msg){
                        $('.yulan').animate({top:'0px',opacity:'0',},1000,function(){
                            $('.user-head').attr('src',$('.user-head-yulan').attr('src'));
                            $('.user-left-head').attr('src',$('.user-head-yulan').attr('src'));
                        });
                    }),
                })

            }
        })();


    });
</script>
<script>

</script>

<script src="../js/common.js"></script>
<script src="../js/menber.js"></script>
<script src="../js/distpicker.data.js"></script>
<script src="../js/distpicker.js"></script>
<script src="../js/main.js"></script>
</body>
</html>